import React from 'react';

class UserAdd extends React.Component {
	constructor() {
		super();
		this.state = {
			form:{
				name:{
					valid:false,
					value:'',
					error:''
				},
				age:{
					valid:false,
					value:'',
					error:''
				},
				gender:{
					valid:false,
					value:'',
					error:''
				}
			}
		};
	}
	handleValueChange (field, value, type='string'){
		if(type == "number"){
			value = +value;//类型转换，将string转换为number
			// alert(value);
		}
		const {form} = this.state;
		const newFieldObj = {value, valid:true,error:''};
		switch(field){
			case 'name':{
				if(value.length > 6){
					newFieldObj.error = '用户名最多6个字符';
					newFieldObj.valid = false;
				} else if(value.length == 0){
					newFieldObj.error = '用户名不能为空';
					newFieldObj.valid = false;
				}
				break;
			}
			case 'age':{
				if(value > 100 || value <= 0){
					newFieldObj.error = '请输入正确年龄';
					newFieldObj.valid = false;
				}
				break;
			}
			case 'gender':{
				if(!value){
					newFieldObj.error = '性别不能为空';
					newFieldObj.valid = false;
				}
				break;
			}
		}
		this.setState({
			form:{
				...form,
				[field]:newFieldObj
			}
		});
	}
	handleSubmit(e){
		e.preventDefault();
		const {form:{name, age, gender}} = this.state;
		if (!name.valid || !age.valid || !gender.valid){
			alert('请输入正确信息后重试');
			return;
		}
		fetch('http://localhost:8080/user', {
			method:'post',
			body:JSON.stringify({
				name:name.value,
				age:age.value,
				gender:gender.value
			}),
			headers:{
				'Content-Type': 'application/json'
			}
		})
		.then((res) => res.json())
		.then((res) => {
			if(res.id){
				alert("添加用户成功");
			} else {
				alert('添加失败');
			}
		})
		.catch((err) => console.log(err));
	}
  render () {
  	const {form:{name, age, gender}} = this.state;
    return (
    	<div>
	    	<header>
	    		<h1>添加用户</h1>
	    	</header>

	    	<main>
	    		<form onSubmit={(e) => this.handleSubmit(e)}>
	    			<label>用户名：</label>
	    			<input type="text" value={name.value} onChange={(e) => this.handleValueChange('name',e.target.value)}/>
	    			{!name.valid && <span>{name.error}</span>}
	    			<br/>
	    			<label>年龄：</label>
	    			<input type="number" value={age.value || ''} onChange={(e) => this.handleValueChange('age',e.target.value,'number')}/>
	    			{!age.valid && <span>{age.error}</span>}
	    			<br/>
	    			<label>性别：</label>
	    			<select value={gender.value} onChange={(e) => this.handleValueChange('gender', e.target.value)}>
						<option value="">请选择</option>
						<option value="male">男</option>
						<option value="female">女</option>
	    			</select>
	    			{!gender.valid && <span>{gender.error}</span>}
	    			<br/>
	    			<br/>
	    			<input type="submit" value="提交"/>
	    		</form>
	    	</main>

    	</div>
    );
  }
}

export default UserAdd;